
<!--修改用户未实现-->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>用户列表 — 管理中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/pager.css">

    <script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="../static/js/bootstrap-paginator.js"></script>

    <script src="js/pager.js"></script>

    <script>

        //分页条
            function pager(total,size,keyword){
            var paras ={
                keyword:keyword,
                limit:size,
                limits: [5,10,15],
                groups:5,
                count:total
            }
            $("#pager").YlpPage(paras);
        }

        function get_users_keyword(username,currentPage, pageSize){

            $.ajax({
                url:"/customer/selectByLikeName",
                method:"GET",
                data:{
                    username,
                    currentPage:currentPage,
                    pageSize: pageSize

                },
                success:(data,status)=>{

                    render_data(data.records);
                    console.log(data.records);

                },
                error:()=>{
                    console.log("查询失败!");
                }
            })

        }

            function get_users(currentPage,pageSize){
                let datas;
                $.ajax({
                    url:"/customer/selectAll",
                    method:"GET",
                    async:false,
                    data:{
                        currentPage,
                        pageSize
                    },
                    success:(data,status)=>{
                        // console.log("用户数据请求成功!")
                        // console.log(data);

                        datas=data;
                    },
                    error:()=>{
                        console.log("用户数据请求失败")

                    }
                })
                return datas;

            }

            //渲染数据到表格
        function render_data(users){
                //清除原本数据
            $("#user_list").empty();

            let i=1;
            //遍历用户数据将用户数据渲染到页面中
            users.map((user)=>{
                    $("#user_list").append("<tr><td>"+i+++"</td><td>"+String(user.id)+"</td><td>"+String(user.username)+"</td><td>"+String("*****")+"</td><td>"+String(user.email)+"</td><td><button id=\"update-btn\" type=\"button\" class=\"btn btn-info\" data-toggle=\"modal\"  onclick='edit1(this)' data-target=\"#updDialog\">修改</button><button id=\"delete-btn\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" onclick='edit2(this)'data-target=\"#deleteDialog\">删除</button>")
            })



        }


        //自动填充修改模态框数据
        function edit1(val){
            //这里就是val，别以为写错了，如果写成this会报错：Uncaught SyntaxError: Unexpected token 'this'，这是转过来的参数值的意思
            let value = $(val).parent().parent().find("td");
            $("#up_id").val(value.eq(1).text())
            $("#upd_name").val(value.eq(2).text())
            $("#upd_status").val(value.eq(3).text())
            $("#user_password").val(value.eq(3).text())
            $("#user_email").val(value.eq(4).text())

            console.log(value.eq(1).text());   //  得到第二列的数据
            console.log(value.eq(4).text());
        }

        //自动填充删除模态框数据
        function edit2(val){
            //这里就是val，别以为写错了，如果写成this会报错：Uncaught SyntaxError: Unexpected token 'this'，这是转过来的参数值的意思
            let value = $(val).parent().parent().find("td");
            $("#delete_id").val(value.eq(1).text())
            $("#delete_name").val(value.eq(2).text())
        }

        /*等待页面加载完成之后，向服务器请求所有用户数据*/
        $(function () {
            //初始化分页条
            let data = get_users(1,5);
            render_data(data.records);
            //获取数据的总数
            let total = data.total;
            let size= data.pageSize;
            //更新分页条
            pager(total,size);

            //给添加用户按钮绑定事件
            $("#btn-add-user").click(()=>{
                let username=$("#user-name").val();
                let password=$("#user-password").val();
                let pwd=$("#re-user-password").val();
                let email=$("#email").val();

                //对数据完整性做验证
                if (!(username && password && pwd && email)){
                    $("#msg").text("请将信息输入完整!").css("color", "red").show();
                    return;
                }
                $("#msg").hide();

                //对密码做验证
                if (password!=pwd){
                    $("#msg").text("两次密码不一致!").css("display","block");
                    return;
                }

                //数据验证通过，发送注册请求
                $.ajax({
                    url: "/customer/register",
                    type: "POST",
                    data: {
                        username,
                        password,
                        pwd,
                        email
                    },
                    success: (data, status) => {
                        // // 根据业务的执行结果，来决定
                        if (data.isOk) {        // 注册成功
                            $("#msg").text("用户添加成功！").css("color", "yellowgreen").show();
                        } else {
                            $("#msg").css("display","block");
                        }
                        $("#msg").text(data.msg).css("color", "yellowgreen").show();
                    },
                    error: () => {
                        $("#msg").text("添加用户请求发送失败！").css("color", "red").show();
                    }
                });

            });

            //给筛选用户按钮绑定事件
            $("#queryBtn").click(() =>{
                let username = $("#username").val();

                //如果username不为空，执行查询，啥也不干
                if (username){
                    $.ajax({
                        url:"/customer/selectByLikeName",
                        method:"GET",
                        data:{
                            username,
                            currentPage:1,
                            pageSize: 5
                        },
                        success:(data,status)=>{
                            document.getElementById("pager_YlpPage").remove();


                            render_data(data);
                            //获取数据的总数
                            let total = data.total;
                            let size= data.pageSize;
                            //更新分页条
                            pager(total,size,username);
                        },
                        error:()=>{
                            console.log("查询失败!");
                        }
                    })
                }else{
                    document.getElementById("pager_YlpPage").remove();
                    let data=   get_users(1,5)
                    render_data(data.records);
                    //获取数据的总数
                    let total = data.total;
                    let size= data.pageSize;
                    //更新分页条
                    pager(total,size);
                }
            })

            //给修改确定按钮绑定事件
            $("#upd_Btn").click(() =>{
                let id=$("#up_id").val();
                let username = $("#upd_name").val();
                let status = $("#upd_price").val();
                let password =$("#user_password").val();
                let email=$("#user_email").val();
                console.log(id);

                    $.ajax({
                        url:"/customer/update",
                        type:"POST",
                        data:{
                            id,
                            username,
                            status,
                            password,
                            email
                        },
                        success:(data,status)=>{
                            // render_data(data.records);
                            console.log(data);
                            if (data.code==="100"){
                                // console.log(data.code);
                                $("#msg1").text("修改成功!!!").css("color", "yellowgreen").show();
                                return;
                            }
                            else if (data.code==="200"){
                                $("#msg1").text("修改失败!!!").css("color", "red").show();
                                return;
                            }
                        },
                        error:()=>{
                            console.log("修改失败!");
                        }
                    })

            })

            //给删除确定按钮绑定事件
            $("#delete_Btn").click(()=>{
                let username = $("#delete_name").val();
                console.log(username);
                $.ajax({
                    url:"/customer/delete",
                    method:"GET",
                    data:{
                        username
                    },
                    success:(data,status)=>{
                            // render_data(data.records);
                            console.log(data);
                        if (data.code==="100"){
                            // console.log(data.code);
                            $("#msg2").text("删除成功!!!").css("color", "yellowreen").show();
                            return;
                        }
                        else if (data.code==="200"){
                            $("#msg2").text("删除失败!!!").css("color", "red").show();
                            return;
                        }

                    },
                    error:()=>{
                        $("#msg2").text("该用户存在商品订单、删除失败!!!").css("color", "red").show();
                    }
                })

            })


        })

    </script>
</head>
<body>

<!--the top nav begin-->
<div class="navbar navbar-default" role="navigation">
    <div class="navbar-inner">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">茶韵商城后台系统</a>
        </div>
        <ul class="nav navbar-nav pull-right">
            <li id="fat-menu" class="dropdown">
                <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-user"></span> 用户名
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="updateadmin.html">我的账户</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="login.html">登出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--the top nav end-->
<!--the sidebar nav begin -->
<div class="sidebar-nav">
    <a href="index.html" class="nav-header" ><span class="glyphicon glyphicon-home"></span> 管理中心 首页</a>

    <a href="category.html" class="nav-header"><span class="glyphicon glyphicon-hd-video"></span> 分类管理</a>

    <a href="product.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 商品管理 </a>

    <a href="order.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 订单管理 </a>

    <a href="userlist.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 账户管理</a>

    <a id="outLink" href="login.html" class="nav-header" ><span class="glyphicon glyphicon-log-out"></span> 登出</a>
</div>
<!--the siderbar nav en-->

<div class="content">


    <div class="container">
        <!--the toolbar begin -->
        <div class="toolbar">
            <div class="row">

                <div class="col-xs-6">
                    <form class="form-inline pull-right" id="device-search" role="form">
                        <div class="form-group">
                            <input id="username" type="text" class="form-control" placeholder="用户名……">
                        </div>
                        <button id="queryBtn" type="button" class="btn btn-default">筛选</button>
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#new-user">新增用户
                        </button>
                    </form>
                </div>
            </div>

        </div>
        <!--all user detail begin -->
        <div class="panel panel-default" id="all-device-detail">
            <div class="panel-heading">
                <h5>所有用户信息</h5>

            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>用户编号</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>联系邮箱</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="user_list">
                </tbody>
            </table>
        </div>

        <!--分页控件-->
        <div style="margin: 40px 0;text-align: center">
            <div id="pager"> </div>
        </div>


    </div>

    <!-- 新建用户模块 -->
    <div class="modal fade" id="new-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">创建新用户</h4>
                </div>
                <div class="modal-body row">
                    <form action="#" class="form-horizontal" id="add-user" role="form" method="post">
                        <div class="form-group">
                            <label for="user-name" class="col-xs-4 control-label">用户名</label>
                            <div class="col-xs-6">
                                <input type="text" class="form-control" id="user-name" name="user-name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user-password" class="col-xs-4 control-label">初始密码</label>
                            <div class="col-xs-6">
                                <input type="password" class="form-control" id="user-password" name="user-password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="re-user-password" class="col-xs-4 control-label">确认密码</label>
                            <div class="col-xs-6">
                                <input type="password" class="form-control" id="re-user-password"
                                       name="re-user-password">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="email" class="col-xs-4 control-label">联系邮箱</label>
                            <div class="col-xs-6">
                                <input type="email" class="form-control" id="email"
                                       name="email">
                            </div>
                        </div>
                    </form>
                    <div id="msg" style="text-align: center;color:red;display: none;">请将数据填写完整！</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload()">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="btn-add-user">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


<!--    修改用户模块-->
    <div class="modal fade" id="updDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel1">修改用户信息</h4>
                </div>
                <div class="modal-body row">
                    <form action="#" class="form-horizontal" id="add-user1" role="form" enctype="multipart/form-data"
                          id="uploadForm2" method="post">
                        <div class="form-group">
                            <label for="up_id" class="col-xs-4 control-label" >用户编号</label>
                            <div class="col-xs-6">

                                <input type="text" class="form-control" id="up_id" disabled = "disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="upd_name" class="col-xs-4 control-label">用户名</label>
                            <div class="col-xs-6">

                                <input type="text" class="form-control" id="upd_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user_password" class="col-xs-4 control-label">密码</label>
                            <div class="col-xs-6">
<!--                                <input type="hidden" id="user_pwd"/>-->
                                <input type="text" class="form-control" id="user_password">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="user_email" class="col-xs-4 control-label">联系邮箱</label>
                            <div class="col-xs-6">
<!--                                <input type="hidden" id="user_em"/>-->
                                <input type="text" class="form-control" id="user_email">
                            </div>
                        </div>
                        <div id="msg1" style="text-align: center;color:red;display: none;"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="upd_closeBtn" type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload()">关闭</button>
                    <button id="upd_Btn" type="button" class="btn btn-primary" >确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->




    <!--    删除用户模块-->
    <div class="modal fade" id="deleteDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel2">是否删除该用户用户</h4>
                </div>
                <div class="modal-body row">
                    <form action="#" class="form-horizontal" id="delete-user1" role="form" enctype="multipart/form-data"
                          id="uploadForm3" method="post">
                        <div class="form-group">
                            <label for="delete_id" class="col-xs-4 control-label" >用户编号</label>
                            <div class="col-xs-6">

                                <input type="text" class="form-control" id="delete_id" disabled = "disabled">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="delete_name" class="col-xs-4 control-label">用户名</label>
                            <div class="col-xs-6">

                                <input type="text" class="form-control" id="delete_name"disabled = "disabled">
                            </div>
                        </div>

                        <div id="msg2" style="text-align: center;color:red;display: none;"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="delete_closeBtn" type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload()">关闭</button>
                    <button id="delete_Btn" type="button" class="btn btn-primary" >确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <footer>
        <hr>
        <p class="pull-right">&copy; 茶韵商城后台系统</p>
    </footer>

</div>
<!--the content end -->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!--全选按钮实现-->
<script>
    $(function () {
        $("#all").click(function () {
            var checked_status = this.checked;
            $("input[name=device-permission]").each(function () {
                this.checked = checked_status;
            });
        });
    });
</script>
</body>
</html>
